<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div v-if="flag">露头就秒</div>
    <div v-if="list.length==0">
      数组为空就隐藏
    </div>
    <!-- v-if 和v-else 形成一组
    v-else-if="条件"  -->
    <div v-if="age>18">成年</div>
    <div v-else-if="age==18">刚刚成年</div>
    <div v-else>未成年</div>

    <!-- v-show="条件"  也是显示隐藏指令
    v-show 显示隐藏是基于css的 display属性 进行显示隐藏的  -->
    <div v-show="obj.sex=='男'">显示</div>
    <!-- 面试题： v-if和v-show的区别
    v-if是真正的显示隐藏，他把元素和组件真正的销毁与重建  而 v-show 基于css的display属性 去控制元素和组件的显示隐藏  
      如果频繁的场景 使用v-show 比较好
  -->
  </div>
  <script src="./vue.js"></script>
  <!-- v-if="布尔值" 指令 
  真正控制元素的  加载与移除 
    '' 空字符为假
    0 为假 
      null和undefined 为假
    -->
  <script>
    new Vue({
      el:"#app",
      data(){
        return {
          flag:false,
          str:'',
          list:["沙漠灰","黑色城镇","供电所"],
          age:18,
          obj:{
            sex:"女"
          }
        }
      }
    })
  </script>
</body>
</html>